<template>
  <el-form-item :label="label">
    <span class="value">{{ displayValue }}</span>
  </el-form-item>
</template>

<script setup>
import { defineProps, computed } from "vue";

const props = defineProps({
  label: {
    type: String,
    required: true,
  },
  value: {
    type: [String, Number],
    default: "",
  },
});

// 动态计算显示的值
const displayValue = computed(() => {
  // 如果是性别字段，根据值返回对应的性别
  if (props.label === "性别：") {
    if (props.value === 0) return "男";
    if (props.value === 1) return "女";
    return "";
  }
  // 其他字段直接返回值
  return props.value;
});
</script>
<style>
.value {
  flex: 1;
  color: #16191d;
  font-size: 13px;
}
</style>
